<template>
  <div class="flex justify-between ml-4 mr-5 mb-1" v-if="isSearch">
    <a-input :placeholder="t('component.icon.search')" v-model:value="searchIconValue" @change="debounceHandleSearchChange" allowClear />
  </div>
  <div v-if="getPaginationList.length > 0">
    <div class="overflow-auto">
      <ul class="px-2 icon-list" style="padding-right: 0">
        <li v-for="icon in getPaginationList" :key="icon" :class="currentSelect === icon ? 'icon-border' : ''" class="p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:border-primary" @click="handleClick(icon)" :title="icon">
          <SvgIcon v-if="isSvgMode" :name="icon" />
          <Icon :icon="icon" v-else />
        </li>
      </ul>
    </div>
    <div class="flex py-2 items-center justify-content-right mr-10 mt-5" v-if="getTotal >= pageSize && isPage">
      <Pagination showLessItems v-model:current="current" :page-size-options="pageSizeOptions" size="small" v-model:pageSize="pageSize" v-model:total="getTotal" @change="handlePageChange" />
    </div>
  </div>
  <template v-else>
    <div class="p-5">
      <empty />
    </div>
  </template>
</template>

<script lang="ts" name="icon-list">
import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
import Icon from '/@/components/Icon/src/Icon.vue';
import { defineComponent, ref, unref, watchEffect } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { usePagination } from '/@/hooks/web/usePagination';
import { propTypes } from '/@/utils/propTypes';
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { Empty, Pagination } from 'ant-design-vue';
export default defineComponent({
  components: {
    SvgIcon,
    Icon,
    Empty,
    Pagination,
  },
  emits: ['update:value'],
  props: {
    currentList: propTypes.any.def([]),
    clearSelect: propTypes.bool.def(false),
    copy: propTypes.bool.def(false),
    isSvgMode: propTypes.bool.def(false),
    isPage: propTypes.bool.def(false),
    isSearch: propTypes.bool.def(false),
    value: propTypes.string.def(''),
  },
  setup(props, { emit }) {
    //选中的值
    const currentSelect = ref('');
    //页数
    const current = ref<number>(1);
    //每页条数
    const pageSize = ref<number>(140);
    //下拉分页显示
    const pageSizeOptions = ref<any>(['10', '20', '50', '100', '140']);
    //下拉搜索值
    const searchIconValue = ref<string>('');
    const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value);

    const currentList = ref<any>(props.currentList);
    const { getPaginationList, getTotal, setCurrentPage, setPageSize } = usePagination(currentList, pageSize.value);
    const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100);
    const { t } = useI18n();
    const { createMessage } = useMessage();
    /**
     * 搜索
     * @param e
     */
    function handleSearchChange(e: ChangeEvent) {
      const value = e.target.value;
      console.log("value::::", value)
      //update-begin---author:wangshuai ---date:20230522  for：【issues/4947】菜单编辑页面菜单图标选择模板，每页显示数量切换无效------------
      setCurrentPage(1);
      current.value = 1;
      //update-end---author:wangshuai ---date:20230522  for：【issues/4947】菜单编辑页面菜单图标选择模板，每页显示数量切换无述------------
      if (!value) {
        currentList.value = props.currentList;
        return;
      }
      currentList.value = props.currentList.filter((item) => item.includes(value));
    }

    //update-begin---author:wangshuai ---date:20230522  for：【issues/4947】菜单编辑页面菜单图标选择模板，每页显示数量切换无效，输入框后面的图标点击之后清空数据------------
    /**
     * 图标点击重置页数
     */
    function currentSelectClick() {
      setCurrentPage(1);
      setPageSize(140);
      current.value = 1;
      pageSize.value = 140;
      currentList.value = props.currentList;
      searchIconValue.value = '';
    }
    //update-end---author:wangshuai ---date:20230522  for：【issues/4947】菜单编辑页面菜单图标选择模板，每页显示数量切换无效，输入框后面的图标点击之后清空数据------------

    function handlePageChange(page: number, size: number) {
      //update-begin---author:wangshuai ---date:20230522  for：【issues/4947】菜单编辑页面菜单图标选择模板，每页显示数量切换无效------------
      current.value = page;
      pageSize.value = size;
      setPageSize(size);
      //update-end---author:wangshuai ---date:20230522  for：【issues/4947】菜单编辑页面菜单图标选择模板，每页显示数量切换无效------------
      setCurrentPage(page);
    }

    /**
     * 图标点击事件
     * @param icon
     */
    function handleClick(icon: string) {
      if (props.clearSelect === true) {
        if (currentSelect.value === icon) {
          currentSelect.value = '';
        } else {
          currentSelect.value = icon;
        }
      } else {
        currentSelect.value = icon;
        if (props.copy) {
          clipboardRef.value = icon;
          if (unref(isSuccessRef)) {
            createMessage.success(t('component.icon.copy'));
          }
        }
      }
      emit('update:value', currentSelect.value);
    }

    /**
     * 获取图标
     */
    function getIcon() {
      return currentSelect.value;
    }

    watchEffect(() => {
      currentSelect.value = props.value;
    });

    return {
      searchIconValue,
      debounceHandleSearchChange,
      getTotal,
      getPaginationList,
      handlePageChange,
      handleClick,
      currentSelect,
      t,
      pageSize,
      pageSizeOptions,
      current,
      getIcon,
      currentSelectClick,
    };
  },
});
</script>

<style scoped lang="less">
ul li {
  width: 32px;
  height: 32px;
  float: left;
  display: flex;
  margin: 6px;
}

ul span {
  font-size: 1.5rem !important;
  padding: 0.2rem;
  margin: 0.3rem;
}

.icon-border {
  border: 1px solid rgba(24, 144, 255) !important;
}

.justify-content-right {
  justify-content: right;
}
</style>
